﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<link href="jquery.zrssfeed.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

<title>zRSSFeed - How to sort feeds by title and date</title>

<script type="text/javascript">
$(document).ready(function () {
	setRSSFeed();	

	$('#sort').change(function() {
		setRSSFeed()
	});

	$('#direction').change(function() {
		setRSSFeed()
	});

	function setRSSFeed() {

		var a = $('#sort option:selected').val();
		var b = $('#direction option:selected').val();
		var c = (b == 'asc') ? true : false;
		
		$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
			sort: a,
			sortasc: c
		});
	}
});
</script>

</head>
<body>

<h1>zRSSFeed - How to sort feeds by title and date</h1>
<p>This example shows how to sort feeds by title or date and ascending or descending order.</p>

<h4>Script</h4>
<pre>
$(document).ready(function () {
	setRSSFeed();	

	$('#sort').change(function() {
		setRSSFeed()
	});

	$('#direction').change(function() {
		setRSSFeed()
	});

	function setRSSFeed() {

		var a = $('#sort option:selected').val();
		var b = $('#direction option:selected').val();
		var c = (b == 'asc') ? true : false;
		
		$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
			sort: a,
			sortasc: c
		});
	}
});
</pre>

<h4>Select the type of sort and direction</h4>
<select id="sort">
	<option value="">- No sorting -</option>
	<option value="title">By Title</option>
	<option value="date">By Date</option>
</select>
<select id="direction">
	<option value="asc">Ascending</option>
	<option value="desc">Descending</option>
</select>

<h4>Result</h4>
<div id="test"></div>

</body>
</html>